<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>One</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<a href="/" >返回首页</a>
<div id="app">
    <div v-for="book in pageData.records">
        图书名称:<input type="text" v-model="book.name" disabled><br/>
        出版社:<input type="text" v-model="book.provider" disabled><br/>
        作者:<input type="text" v-model="book.author" disabled><br/>
        价格:<input type="text" v-model="book.price" disabled><br/>
        详情:<textarea type="text" v-model="book.detail" cols="15" rows="5"></textarea><br/>
        图片:<img :src="book.imgsrc" style="height: 60px;width: 60px" ><br/>
        购买量:<input type="text" v-model="book.buycount" disabled>
    </div>
    <div>
        <a href="" @click.prevent="initBookList(pageData.current-1)">上一页</a>
        <a href="" v-for="index in pageData.pages" v-text="index" @click.prevent="initBookList(index)">1</a>
        <a href="" @click.prevent="initBookList(pageData.current+1)">下一页</a>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            pageData: {
                current: 1,
                size: 3,
                total: -1,
                records: [],
                pages: 1
            }
        },
        methods: {
            initBookList(page = 1) {
                console.log(page)
                if (page < 1 || page > this.pageData.pages) {
                    page = 1;
                }
                let data = {
                    page: page,
                    pageSize: this.pageData.size
                };
                $.get('/book/getListByPage', data, data => {
                    this.pageData.current = data.current;
                    this.pageData.size = data.size;
                    this.pageData.total = data.total;
                    this.pageData.records = data.records;
                    this.pageData.pages = data.pages;
                    console.log(data)
                });

            }
        },
        created() {
            this.initBookList();
        }
    })
</script>
</html>